<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>画廊-指标卡</title>
  <style>
    .card-container {
      width: 170px;
      height: 74px;
      border: 1px solid #DBDBDB;
      border-radius: 4px;
    }
    .card-container .main-text{
      text-align: center;
      margin: 12px 14px;
      padding-bottom: 8px;
      margin-bottom: 0px;
      font-size: 16px;
      border-bottom: 1px solid #DBDBDB;
    }
    .card-container p{
      font-size: 12px;
      margin: 8px;
    }
    .card-container .value-text{
      margin-left: 12px;
      text-align: left;
    }
    .card-container .percent-text{
      margin-right: 12px;
      float: right;
      color: red
    }
  </style>
</head>

<body>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script src="../build/plugins.js"></script>
  <script>
    G6.registerNode('card', {
      draw(item) {
        const group = item.getGraphicGroup();
        const {main, value, percent, type} = item.getModel();
        const width = 170;
        const height = 74;
        const html = G6.Util.createDOM(`
          <div class="card-container">
            <h1 class="main-text">${main}</h1>
            <p>
              <span class="value-text">${value}</span>
              <span class="percent-text">${percent}</span>
            </p>
          </div>
        `);
        return group.addShape('dom', {
          attrs: {
            x: 0,
            y: 0,
            width,
            height,
            html
          }
        });
      },
      anchor: [
        [0.5, 0],
        [0.5, 1]
      ]
    });
    G6.registerEdge('polyline', {
      offset: 20
    });
    const data = {
      roots: [{
        main: '主指标一',
        value: 123111,
        percent: '100%',
        type: 'a',
        children: [{
          main: '指标 1',
          value: 12312,
          percent: '39%',
          type: 'b',
          children: [
            {
              main: '指标 1.1',
              value: 111,
              percent: '90%',
              type: 'a',
            }
          ]
        }, {
          main: '指标 2',
          value: 12312,
          percent: '79%',
          type: 'b',
        }]
      }]
    };
    const tree = new G6.Tree({
      container: 'mountNode',
      height: 500,
      renderer: 'svg',
      layout: new G6.Layouts.CompactBoxTree({
        // direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
        getHGap: function getHGap() /* d */ {
          // 横向间距
          return 100;
        },
        getVGap: function getVGap() /* d */ {
          // 竖向间距
          return 24;
        },
        direction: 'TB'
      }),
      fitView: 'tc'
    });
    tree.node({
      shape: 'card'
    });
    tree.edge({
      shape: 'polyline'
    });
    tree.read(data);
  </script>
</body>
</html>